<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载</title>
    <script>
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 375;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" content="width=375, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=375, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta name="viewport" content="width=375, user-scalable=no, target-densitydpi=device-dpi">');
    }
    </script>
    <style>
    html,
    body {
        background-color: #fff;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    #app {
        width: 100%;
        height: 100%;
        background-image: url(./appdown.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .download_container {
        display: flex;
        position: absolute;
        bottom: 120px;
        justify-content: space-around;
        width: -webkit-fill-available;
        margin: 0 20px;
    }

    .download_box {
        background: #fe0000;
        padding: 10px 80px;
        border-radius: 1px;
        font-size: 14px;
        font-family: PingFang SC;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .download_box i {
        font-size: 30px;
        margin: 0 10px;
    }

    .shadow {
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.8;
        background-image: url(__STATIC__/pintuan/img/to_browser.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .logo {
        position: absolute;
        border-radius: 20px;
        width: 80px;
        height: 80px;
        overflow: hidden;
        margin-left: -40px;
        left: 50%;
        top: 190px;
        box-shadow: 0 0 15px 0px #ccc;
    }

    .logo img {
        width: 100%;
    }

    .content {
        position: absolute;
        top: 450px;
        text-align: center;
        width: 100%;
    }

    .content h1 {
        font-weight: 600;
        font-size: 28px;
        font-family: fangsong;
    }

    .content p { 
        font-size: 16px;
        font-family: PingFang SC;
    }

    .intro {
        position: absolute;
        bottom: 10px;
        width: 100%;
        font-size: 12px;
        color: #ccc;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="app">
        <div class="logo">
            <img src="logo.jpg" alt="">
        </div>
        <div class="content">
            <h1>交易 支付 投资</h1>
            <p>打造全方位一流服务</p>
        </div>
        <div class="download">
            <div class="download_container">
                <div class="download_box">立即下载APP</div>
            </div>
        </div>
        <p class="intro">青岛文化产权交易所旗下平台</p>
        <!-- <div class="shadow" v-if="showdow"></div> -->
    </div>
    <script>
    function download(item) {
        var browser = {
            versions: function() {
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                return { //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if (browser.versions.mobile) {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                this.showdow = true;
                return false
            }
        }

        if (item == 'ios') {
            window.location.href = this.IOS_url
        } else {
            window.location.href = this.Android_url
        }
    }
    </script>
</body>

</html>